<template>
  <div class="edit-box">
    <el-dialog
        v-model="isDialogShow"
        title="修改密码"
        width="30%"
        :before-close="handleClose"
        class="dia-box"
    >
      <div class="edit-body">
        <el-form
            :model="editForm"
            label-width="5vw"
            :rules="editRules"
            ref="editFormRef"
        >
          <el-form-item label="新密码 : " prop="newPW">
            <el-input v-model="editForm.newPW" type="password"/>
          </el-form-item>
          <el-form-item label="确认密码 : " prop="reNewPW">
            <el-input v-model="editForm.reNewPW" type="password" />
          </el-form-item>
          <el-form-item class="last-btn">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submitFileForm(editFormRef)">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElButton, ElDialog, ElForm, ElFormItem, ElMessage, ElMessageBox, ElInput} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import {edit, edituser, getuserinfo} from "@/api/index.js"
import {useRoute, useRouter} from "vue-router";
let userInfo = reactive({})
const isDialogShow = ref(false)
const editFormRef = ref()
const emits = defineEmits(['refresh'])
const router = useRouter()

let editForm = reactive({
  newPW : '',
  reNewPW : '',
})

// 验证手机号
let checkMobile = (rule,value, callback) => {
  // const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
  if (value !== editForm.newPW) {
    callback(new Error('请输入正确的手机号'))
    return
  }
  return callback()
}

const editRules = {
  newPW:[
    { required: true, message: '密码不能为空', trigger: 'blur' },
  ],
  reNewPW:[
    {required: true, message: '确认密码不能为空', trigger: 'blur'},
    { validator: checkMobile, message: '两次密码不一致', trigger: 'blur' }
  ],
}

//获取用户信息
const get = async ()=>{
  try {
    let i = JSON.parse(localStorage.getItem('syhyDocManSys'))
    const {data : res} = await getuserinfo({userId:i.id})
    editForm.newUserName = res.data.username
    editForm.newTel = res.data.tel === null ? '' : res.data.tel
    editForm.newUserPlace = res.data.address === null ? '' : res.data.address
  } catch (e) {
    console.log(e)
  }
}
//修改用户信息
const showEditIndoDialog = (info) =>{
  get()
  isDialogShow.value = true
  userInfo = info
}
const handleClose = (done) => {
  ElMessageBox.confirm('是否取消修改?','提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'Warning',
      })
      .then(() => {
        isDialogShow.value = false
        done()
      })
      .catch(() => {
        // catch error
      })
}

const submitFileForm = async (fr)=>{
  const v = await fr.validate()
  if(!localStorage.getItem('syhyDocManSys')){
    await router.push('/login')
    return ElMessage({
      message:'身份验证失败,请先登录',
      type:'error'
    })
  }
  if(v){
    const {data : res} = await edituser({
      userId : JSON.parse(localStorage.getItem('syhyDocManSys')).id,
      newPW : editForm.newPW,
      reNewPW : editForm.reNewPW,
    })
    if(res.code === 200){
      isDialogShow.value = false
      editForm.newPW = ''
      editForm.reNewPW = ''
      return ElMessage( {
        message:'修改成功!',
        type:'success'
      })
    } else if (res.code ===400){
      return ElMessage({
        message:'修改失败!',
        type:'warning'
      })
    }
  }
}


defineExpose({showEditIndoDialog})
</script>

<style scoped lang="less">
.edit-box{
  height: 30vh;
  width: 20vw;
  .edit-body{
    /deep/.el-form-item{
      width: 85%;
      margin: 5% auto;
    }
    /deep/.el-form-item__label {
      justify-content: flex-start;
    }
    .last-btn{
      margin-top: 5%;
    }
  }
}
</style>